﻿@layout IframeLayout
@namespace MudBlazor.Docs.Examples
@page "/iframe/docs/examples/drawer/breakpoint"

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/MudBlazor/MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="@_open" Breakpoint="@_breakpoint" Elevation="1" Variant="@DrawerVariant.Responsive">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-16 px-16">
        <MudContainer Class="mt-6">
            <MudSelect Label="Select breakpoint" @bind-Value="_breakpoint">
                <MudSelectItem Value="@Breakpoint.Sm">Breakpoint.Sm</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Md">Breakpoint.Md</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Lg">Breakpoint.Lg</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Xl">Breakpoint.Xl</MudSelectItem>
            </MudSelect>
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code{
    private bool _open = false;
    private Breakpoint _breakpoint = Breakpoint.Lg;

    private void ToggleDrawer()
    {
        _open = !_open;
    }
}
